<template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;">
				<div class="cuIcon-back icon left" @click="back"></div>
				<div class="center">
					<view class="cu-bar ">
						<view class="search-form round mySearch" style="margin: 0;padding: 0;">
							<input v-model="searchVal" type="text" placeholder=" 输入搜索内容/关键字" placeholder-style="text-align:center" placeholder-class='cuIcon-search' style="text-align: center;" />
						</view>
					</view>
				</div>
			</view>
		</view>
		<div style="width: 100%;height: 90rpx;"></div>
		<div class='listCont'>
			<div class='item' v-for='(item,index) in data ' :key='index'>
				<div :class="openIndex==index?'contItem selected':'contItem'" @click='open(index)'>
					<div class='left'>
						<div class='title'>{{item.title}}</div>
						<div class='info'>共{{item.num}}节
						 <!-- | 已学 {{item.tiem}}分钟 -->
						 </div>
					</div>
					<div class='right open' v-show='openIndex==index'></div>
					<div class='right close' v-show='openIndex!=index'></div>
				</div>
				<div style='width: 100%;' v-show='openIndex==index'>
					<div class='listItem' v-for='(itemData,i) in item.second ' :key="'0'+i" @click='toNext(itemData)'>
						<div class='name'>{{itemData.title}}</div>
						<div class='right'></div>
					</div>
				</div>
			</div>
			<!-- 		<div class='item'>
				<div class='contItem'>
					<div class='left'>
						<div class='title'>第一章 读图与绘图</div>
						<div class='info'>共2节 | 已学 0分钟</div>
					</div>
					<div class='right open'></div>
					<div class='right close'></div>
				</div>
				<div class='listItem'>
					<div class='name'>1.1 图样分析</div>
					<div class='right'></div>
				</div>
				<div class='listItem'>
					<div class='name'>1.1 图样分析</div>
					<div class='right'></div>
				</div>
			</div>
			<div class='item'>
				<div class='contItem'>
					<div class='left'>
						<div class='title'>第一章 读图与绘图</div>
						<div class='info'>共2节 | 已学 0分钟</div>
					</div>
					<div class='right open'></div>
					<div class='right close'></div>
				</div>
			</div> -->
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				openIndex: -1,
				searchVal:'',
				data: []
			}
		},
		onLoad(e) {
			//console.log('e==入参===', e)
			this.id = e.id
		},
		onShow() {
			// // document.title = '预约规则';
			this.getData()
			//console.log('执行了onShow')
		},
		mounted() {},
		watch: {
			searchVal(val) {
				this.data=[]
				this.getMoreData()
				//console.log('val==', val)
			},
		},
		methods: {
			open(index) {
				if (this.openIndex == index) {
					this.openIndex = -1
				} else {
					this.openIndex = index
				}
				//console.log('open', index)
			},
			getData() {
				let _this = this;
				_this.uniRequest({
					url: `/books/classify`,
					method: 'post',
					data: {
						id: _this.id
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.data = res.data;
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			getMoreData() {
				let _this = this;
				_this.uniRequest({
					url: `/books/classify_find`,
					method: 'post',
					data: {
						id: _this.id,
						name: _this.searchVal,
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.data = res.data;
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			toNext(itemData) {
				// 去下一页
				//console.log('itemData==', itemData)
			},

		}
	}
</script>

<style lang='less' scoped>
	.content {
		background-color: #ece8e5;
		min-height: 100vh;
		.topNav {
			background: #1C81DF;
			color: white;
			background-color: #eee7e5;
			.cu-bar{
				margin-top: -36rpx;
				width: 90%;
				float: right;
				box-sizing: border-box;
			}
		};
		.mySearch{
			background: #FFFFFF;
			/* width: 10%; */
		}
		.listCont {
			padding: 32rpx;

			.item {
				width: 100%;
				/* padding: 32rpx; */
				background: #FFFFFF;
				border-radius: 16rpx;
				box-sizing: border-box;
				overflow: hidden;

				.contItem {
					padding: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #181E27;
						}

						.info {
							font-size: 24rpx;
							font-weight: normal;
							color: #1C81DF;
						}

					}

					.right {
						height: 14rpx;
						width: 22rpx;
					}

					.right.open {
						background: url(~@/static/imgs/icon_liat_zhankai_o.png) no-repeat center;
						background-size: 100% 100%;
					}

					.right.close {
						background: url(~@/static/imgs/icon_list_zhankai.png) no-repeat center;
						background-size: 100% 100%;
					}
				}

				.selected {
					background: #D9EDFF;
				}

				.listItem {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 32rpx 0;
					margin: 0 32rpx;
					border-bottom: 1px solid #E2E4E7;

					.name {
						font-size: 30rpx;
						font-weight: normal;
						color: #575C65;
						position: relative;
						padding-left: 40rpx;
					}

					.name::before {
						content: '';
						position: absolute;
						left: 0;
						top: calc(50% - 14rpx);
						background: url(~@/static/imgs/icon_list_erji_liebiao.png) no-repeat center;
						background-size: 100% 100%;
						height: 28rpx;
						width: 26rpx;
					}

					.right {
						background: url(~@/static/imgs/icon_arrow.png) no-repeat center;
						background-size: 100% 100%;
						height: 30rpx;
						width: 18rpx;
					}

				}

				.listItem:last-child {
					border-bottom: 0;
				}

			}

			.item:not(:last-child) {
				margin-bottom: 32rpx;
			}
		}
	}
</style>
